<template>
  <div>
    <Base :id="'bargraph1'" :data="option2" style="height:350px;"></Base>
    <Base :id="'bargraph2'" :data="option2" style="height:350px;"></Base>
    <Base :id="'bargraph3'" :data="option3" style="height:350px;"></Base>
    <Base :id="'bargraph4'" :data="option4" style="height:600px;"></Base>
    <Base :id="'bargraph5'" :data="option5" style="height:600px;"></Base>
    <Base :id="'bargraph6'" :data="option6" style="height:600px;"></Base>
    <Base :id="'bargraph7'" :data="option7" style="height:600px;"></Base>
    <Base :id="'bargraph8'" :data="option8" style="height:600px;"></Base>
    <Base :id="'bargraph9'" :data="option9" style="height:600px;"></Base>
    <Base :id="'bargraph10'" :data="option10" style="height:600px;"></Base>
    <Base :id="'bargraph11'" :data="option11" style="height:600px;"></Base>
    <Base :id="'bargraph12'" :data="option12" style="height:600px;"></Base>
    <Base :id="'bargraph13'" :data="option13" style="height:600px;"></Base>
    <!--json格式化处理-->
    <json-viewer
      :value="formatData"
      :expand-depth="5"
      copyable
      boxed
      sort
    ></json-viewer>
    <linegraph></linegraph>
  </div>
</template>

<script>
  import linegraph from '../Aside/report/baseEchartsCalendar.vue'
  import Base from '../../components/Aside/report/baseEcharts.vue'

  export default {
    name: "Test",
    data() {
      return {
        formatData:{
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        option2: {
          title: {
            text: '全年设备产量对比图',
            left: 'center'
          },
          xAxis: {
            type: 'category',
            data: ['检品机1', '检品机2', '检品机3', '检品机4', '检品机5', '检品机6', '检品机7']
          },
          yAxis: {
            type: 'value'
          },
          legend: {
            left: 'center',
            data: ['本年', '上年'],
            bottom: 0
          },
          grid: {
            left: '1%',
            right: '2%',
            bottom: '8%',
            containLabel: true
          },
          series: [
            {
              name: '本年',
              data: [1000, 200, 150, 80, 70, 110, 130],
              type: 'bar',
              barWidth: 30,
            },
            {
              name: '上年',
              data: [120, 100, 100, 40, 30, 50, 70],
              type: 'bar',
              barWidth: 30,  // 宽度
            }]
        },

        option3: {
          series: [
            {
              name: '访问来源',
              type: 'pie',    // 设置图表类型为饼图
              radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
              // 高亮样式。
              emphasis: {
                itemStyle: {
                  // 高亮时点的颜色
                  color: 'red'
                },
                label: {
                  show: true,
                  // 高亮时标签的文字
                  formatter: '高亮时显示的标签内容'
                }
              },
              data: [          // 数据数组，name 为数据项名称，value 为数据项值
                {value: 235, name: '视频广告'},
                {value: 274, name: '联盟广告'},
                {value: 310, name: '邮件营销'},
                {value: 335, name: '直接访问'},
                {value: 400, name: '搜索引擎'}
              ]
            }
          ]
        },

        option4: {
          title: {
            text: 'ECharts 入门示例'
          },
          legend: {},
          tooltip: {
            trigger: 'axis',
            showContent: false
          },
          dataset: {
            source: [
              ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
              ['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
              ['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
              ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
              ['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1]
            ]
          },
          xAxis: {type: 'category'},
          yAxis: {gridIndex: 0},
          grid: {top: '55%'},
          // 显示的数据
          series: [
            {type: 'line', smooth: true, seriesLayoutBy: 'row'},
            {type: 'line', smooth: true, seriesLayoutBy: 'row'},
            {type: 'line', smooth: true, seriesLayoutBy: 'row'},
            {type: 'line', smooth: true, seriesLayoutBy: 'row'},
            // 下面时饼图
            {
              type: 'pie',
              id: 'pie',
              radius: '30%',
              center: ['50%', '25%'],
              label: {
                formatter: '{b}: {@2012} ({d}%)'
              },
              encode: {
                itemName: 'product',
                value: '2012',
                tooltip: '2012'
              }
            }
          ]

        },

        option5: {
          title: {
            text: 'ECharts 入门示例'
          },
          tooltip: {},
          legend: {
            data: ['销量', '价格']
          },
          xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
          },
          yAxis: {},
          series: [
            {
              name: '销量',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20]
            },
            {
              name: '价格',
              type: 'bar',
              data: [22, 22, 32, 12, 12, 22]
            },
          ]
        },

        option6: {
          title: {text: 'Line Chart'},
          tooltip: {},
          toolbox: {
            feature: {
              dataView: {},
              saveAsImage: {
                pixelRatio: 2
              },
              restore: {}
            }
          },
          xAxis: {},
          yAxis: {},
          series: [{
            type: 'line',
            smooth: true,
            data: [[12, 5], [24, 20], [36, 36], [48, 10], [60, 10], [72, 20]]
          }]
        },

        option7: {
          title: {
            text: 'ECharts 入门示例'
          },
          tooltip: {},
          xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
          },
          yAxis: {},
          series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }]
        },

        // 适用于单次任务测试
        option8: {
          legend: {},
          tooltip: {},
          dataset: {
            // 提供一份数据。
            source: [
              ['product', '2015', '2016', '2017'],
              ['Matcha Latte', 43.3, 85.8, 93.7],
              ['Milk Tea', 83.1, 73.4, 55.1],
              ['Cheese Cocoa', 86.4, 65.2, 82.5],
              ['Walnut Brownie', 72.4, 53.9, 39.1]
            ]
          },
          // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
          xAxis: {type: 'category'},
          // 声明一个 Y 轴，数值轴。
          yAxis: {},
          // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
          series: [
            {type: 'bar'},
            {type: 'bar'},
            {type: 'bar'}
          ]
        },

        option9: {
          legend: {},
          tooltip: {},
          dataset: {
            // 这里指定了维度名的顺序，从而可以利用默认的维度到坐标轴的映射。
            // 如果不指定 dimensions，也可以通过指定 series.encode 完成映射，参见后文。
            dimensions: ['product', '2015', '2016', '2017'],
            source: [
              {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},
              {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},
              {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},
              {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}
            ]
          },
          xAxis: {type: 'category'},
          yAxis: {},
          series: [
            {type: 'bar'},
            {type: 'bar'},
            {type: 'bar'}
          ]
        },

        option10: {
          legend: {},
          tooltip: {},
          dataset: {
            source: [
              ['product', '2012', '2013', '2014', '2015'],
              ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
              ['Milk Tea', 86.5, 92.1, 85.7, 83.1],
              ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]
            ]
          },
          xAxis: [
            {type: 'category', gridIndex: 0},
            {type: 'category', gridIndex: 1}
          ],
          yAxis: [
            {gridIndex: 0},
            {gridIndex: 1}
          ],
          grid: [
            {bottom: '55%'},
            {top: '55%'}
          ],
          series: [
            // 这几个系列会在第一个直角坐标系中，每个系列对应到 dataset 的每一行。
            {type: 'bar', seriesLayoutBy: 'row'},
            {type: 'bar', seriesLayoutBy: 'row'},
            {type: 'bar', seriesLayoutBy: 'row'},
            // 这几个系列会在第二个直角坐标系中，每个系列对应到 dataset 的每一列。
            {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
            {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
            {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
            {type: 'bar', xAxisIndex: 1, yAxisIndex: 1}
          ]
        },

        option11: {
          legend: {},
          tooltip: {},
          dataset: {
            source: [
              ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
              ['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
              ['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
              ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
              ['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1]
            ]
          },
          series: [{
            type: 'pie',
            radius: 60,
            center: ['25%', '30%']
            // No encode specified, by default, it is '2012'.
          }, {
            type: 'pie',
            radius: 60,
            center: ['75%', '30%'],
            encode: {
              itemName: 'product',
              value: '2013'
            }
          }, {
            type: 'pie',
            radius: 60,
            center: ['25%', '75%'],
            encode: {
              itemName: 'product',
              value: '2014'
            }
          }, {
            type: 'pie',
            radius: 60,
            center: ['75%', '75%'],
            encode: {
              itemName: 'product',
              value: '2015'
            }
          }]
        },

        option12: {
          xAxis: {
            type: 'category',
            data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
          },
          yAxis: {},
          series: [{
            type: 'bar',
            name: '2015',
            data: [89.3, 92.1, 94.4, 85.4]
          }, {
            type: 'bar',
            name: '2016',
            data: [95.8, 89.4, 91.2, 76.9]
          }, {
            type: 'bar',
            name: '2017',
            data: [97.7, 83.1, 92.5, 78.1]
          }]
        },

        option13: {
          title: {
            text: '当月用例报告'
          },
          legend: {},
          tooltip: {
            trigger: 'axis',
            showContent: false
          },
          // legend: {
          //   // orient: 'vertical',
          //   left: 'left',
          //   data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
          // },
          dataset: {
            source: [
              ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
              ['用例总数', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
              ['执行用例数', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
              ['用例失败数', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
              ['用例未执行数', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1]
            ]
          },
          xAxis: {
            type: 'category',
            // data: ["2012", "2013", "2014", "2015", "2016", "2017"]
          },
          yAxis: {gridIndex: 0},
          grid: {top: '55%'},
          series: [
            {type: 'line', smooth: true, seriesLayoutBy: 'row'},
            {type: 'line', smooth: true, seriesLayoutBy: 'row'},
            {type: 'line', smooth: true, seriesLayoutBy: 'row'},
            {type: 'line', smooth: true, seriesLayoutBy: 'row'},
            {
              type: 'pie',
              id: 'pie',
              radius: '30%',
              center: ['50%', '25%'],
              label: {
                formatter: '{b}: {@2012} ({d}%)'
              },
              encode: {
                itemName: 'product',
                value: '2012',
                tooltip: '2012'
              }
            }
          ]
        },

      }
    },
    components: {
      linegraph,
      Base
    }
  }
</script>
